<template>
  <div class="booking">
    <p class="booking_title">预约渠道数据统计</p>
    <p><img src="../../../images/dataScreen-title.png" alt=""></p>
    <div class="booking_charts" ref="charts"></div>
  </div>
</template>

<script setup lang='ts'>
// 引入相对应的组件
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
// 获取charts数据的dom元素
let charts = ref()
// 定义饼图数据
const data = [
  { value: 400, name: "智慧文旅平台" },
  { value: 100, name: "携程" },
  { value: 200, name: "飞猪" },
  { value: 300, name: "其他渠道" },

];

let sum = data.reduce(
  (accumulator, current) => accumulator + current.value,
  0
);
onMounted(() => {
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    color: [
      "#C5AB0E",
      "#3B82F6",
      "#00FAFF",
      "#6236FF",
      "#B396DD",
      "#FFB77C",
      "#BDA29A",
      "#EC4899",
      "#546570",
      "#6366F1",
      "#6E7074",
      "#F59E0B",
    ],
    legend: {
      type: "scroll",
      pageIconSize: 14,
      pageButtonItemGap: 1,
      left: '3%',
      orient: "vertical",
      top: "25%",
      icon: "rect",
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 20,
      formatter: function (name: any) {
        for (var i = 0; i < data.length; i++) {
          if (name == data[i].name) {
            const rate = ((data[i].value / sum) * 100).toFixed(0);
            return `{a|${name}} {b|${rate}%} `;
          }
        }
      },
      textStyle: {
        color: "#FFF",
        fontSize: 16,
        rich: {
          a: {
            width: 70,
          },
          b: {
            width: 30,
          },
          c: {
            width: 50,
          },
        },
      },
    },
    tooltip: {
      backgroundColor: "#2e6099",
      textStyle: {
        color: "#FFF",
      },
    },
    series: [
      {
        // name: "Access From",
        type: "pie",
        radius: ["40%", "60%"],
        center: ["60%", "45%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  })
})
</script>

<style scoped>
.booking {
  margin: 15px 15px;
  width: 420px;
  height: 350px;
  background: url(../../../images/dataScreen-main-rb.png) no-repeat;
  background-size: 100% 100%;

  .booking_title {
    color: white;
    font-size: 20px;

  }

  .booking_charts {
    height: 340px;
  }
}
</style>